<template>
	<view class="">
		<view class="charts-box" >
		    <qiun-data-charts 
		      type="column"
		      :opts="opts"
		      :chartData="chartData"
					 :canvas2d="true"
		    />
		  </view>
	</view>
</template>

<script>
	import {
		getSnUseTime
	} from '@/api/userHome.js'
	export default {
		props: ['useRecordValue'],
		data(){
			return{
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel:false,
					dataPointShape:true,
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,15,0,5],
					legend: {
						show:false
					},
					xAxis: {
						disableGrid:false,
						gridColor:'#f8f8f8',
						labelCount:5,
					},
					yAxis: {
						data: [
							{
								min: 0,	
								textAlign:'center',
								format:'123'
							}
						],
						gridColor:'#f8f8f8',
						disableGrid:true
					},
					extra: {
						column: {
							type: "group",
							width: 9,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle:true,
						}
					}
				},
			}
		},
		onReady() {
		    this.getSnUseTime();
		},
		methods: {
			getSnUseTime() {
				let param = {
					id: uni.getStorageSync("snId"),
					dayType: this.useRecordValue
				}
				getSnUseTime(param).then(res =>{
					this.chartData = res.data
				}).catch(err => {
					console.log(err)
				})
				
				// setTimeout(() => {
				// 	//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				// 	let res = {
				// 			categories: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
				// 			series: [
				// 				{
				// 					name: "使用时间",
				// 					data: [0,2,1,2,3,55,4,33,22,2,22,3,44,5,0,77,66,66,5,44,22,11,2,66]
				// 				},
								
				// 			]
				// 		};
				// 	this.chartData = JSON.parse(JSON.stringify(res));
				// }, 500);
			},
		},
		watch: {
			useRecordValue: function(newVal, oldVal) {
				this.getSnUseTime()
			}
		}
	}
</script>

<style lang="scss" scoped>
	 .charts-box {
	    width: 100%;
	    height: 400rpx;
	  }
</style>